<template>
  <div class="cover">
    <h3>LOGIN</h3>
    <p>
      <span> email:</span
      ><input type="email" placeholder="email" v-model="userdata.email" />
    </p>
    <p>
      <span>password:</span
      ><input type="password" v-model="userdata.password" />
    </p>
    <p>
      <button @click="handleLogin">登陆</button>
    </p>
  </div>
</template>

<script>
import { reactive } from "vue";
import { getLogin } from "../../api/data";
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
export default {
  setup() {
    const store = useStore();
    const router=useRouter()
    const userdata = reactive({
      password: "",
      email: "",
    });

    const handleLogin = async () => {
      if (userdata.password && userdata.email) {
        let data1 = await getLogin(userdata);
        alert(data1.msg);
        // 保存到store
        store.commit("setuserdata", data1.data);
        
      } else {
        alert("账号和密码必须填");
      }
    };

    return {
      handleLogin,
      userdata,
    };
  },
};
</script>

<style lang="scss" scoped>
.cover {
  margin: 50px auto;
  width: 350px;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #999;
  h3 {
    font-size: 24px;
    color: #88c6e5;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }

  p {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #666;
    span {
      display: inline-block;
      min-width: 80px;
      text-align: right;
    }
    input {
      padding-left: 5px;
      height: 30px;
      margin-left: 10px;
    }
  }

  button {
    width: 100px;
    height: 30px;
    font-size: 14px;
    color: #333;
  }
}
</style>